<template>
  <div>
    <BasicTable @register="registerTable">
      <template #tableTitle>
        <a-button preIcon="ant-design:plus-outlined" type="primary" @click="handleAdd" style="margin-right: 5px">新增</a-button>
        <a-button type="primary" preIcon="ant-design:import-outlined" @click="handleImport">
          导入
        </a-button>
      </template>
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
      </template>
    </BasicTable>
    <IdpForm @register="registerIdpForm" @success="reload" showFooter />
    <IdpConnectList @register="registerIdpConnectList" />
    <IdpDetail @register="registerIdpDetail" />
    <ImportTmpl @register="registerImport" @success="reload" />

  </div>
</template>
<script lang="ts" name="ext-idp-template-list" setup>
  import { unref } from "vue"
  import { BasicTable, TableAction, ActionItem } from "/@/components/Table"
  import IdpConnectList from "./connect/List.vue"
  import IdpDetail from "./detail.vue"
  import { useDrawer } from "/@/components/Drawer"
  import * as extIdpApi from "/@/api/iam/extIdp"
  import { columns, searchFormSchema } from "./data"
  import IdpForm from "./form.vue"
  import { useMessage } from "/@/hooks/web/useMessage"
  import { useListPage } from "/@/hooks/system/useListPage"
  import { useCopyToClipboard } from "/@/hooks/web/useCopyToClipboard";
  import ImportTmpl from './components/ImportTmpl.vue';
  
  const [registerImport, { openDrawer: openImport }] = useDrawer();
  const { clipboardRef, copiedRef } = useCopyToClipboard();
  const [registerIdpConnectList, { openDrawer: openConnectionTmplDrawer }] = useDrawer()
  const [registerIdpForm, { openDrawer: openIdpForm }] = useDrawer()
  const [registerIdpDetail, { openDrawer: openIdpDetail }] = useDrawer()
  const { createMessage } = useMessage()

  const { prefixCls, tableContext } = useListPage({
    designScope: "ext-ldp-list",
    tableProps: {
      title: "身份源列表",
      bordered: false,
      api: extIdpApi.pageIdpTmpl,
      actionColumn: {
        width: 210,
        title: "操作",
        dataIndex: "action",
        fixed: 'right',
        slots: { customRender: "action" },
      },
      useSearchForm: true,
      columns: columns,
      formConfig: {
        schemas: searchFormSchema,
      },
    },
  })
  const [registerTable, { reload }, { selectedRowKeys }] = tableContext

  function getTableAction(record) {
    return [
      {
        label: "编辑",
        onClick: handleEdit.bind(null, record),
      },
      {
        label: "详情",
        onClick: handleIdpDetail.bind(null, record),
      },
      {
        label: "删除",
        color: 'error',
        ifShow: () => record.id !== "1",
        popConfirm: {
          title: `是否确认删除 ${record.name}`,
          confirm: handleDelete.bind(null, record),
        },
      },
    ]
  }

  const handleOpenConnectionTmpls = (record) => {
    openConnectionTmplDrawer(true, { record })
  }

  const handleIdpDetail = (record) => {
    openIdpDetail(true, { record })
  }

  function getDropDownAction(record): ActionItem[] {
    return [
      {
        label: "复制",
        onClick: handleCopy.bind(null, record),
      },

      {
        label: "登录模式",
        onClick: handleOpenConnectionTmpls.bind(null, record),
      },
    ]
  }

  function handleAdd() {
    openIdpForm(true, {
      isUpdate: false,
    })
  }


  function handleEdit(record) {
    openIdpForm(true, {
      record,
      isUpdate: true,
    })
  }

  async function handleDelete(record) {
    await extIdpApi.deleteIdpTmpl({ id: record.id }, reload)
  }

  const handleImport = () => openImport(true, { });

  const handleCopy = async (record) => {
    clipboardRef.value = "";
    createMessage.loading({
      content: "复制中...",
      key: "loading",
      duration: 0
    });

    try {
      const data = await extIdpApi.getCopyIdpTmpl({ id: record.id });
      clipboardRef.value = JSON.stringify(data, null, 2);
      if (unref(copiedRef)) {
        createMessage.success(`所选身份源模板【${record.name}】已保存到剪切板`);
      } else {
        createMessage.success("复制失败");
      }
    } finally {
      createMessage.destroy("loading");
    }
  }

</script>
